import "./Order2.css";
import { useState, useEffect } from "react";

export function Order2({ callBack, backOrder1, initialFormData }) {
  const [formData, setFormData] = useState(initialFormData || {
    firstName: "ABC",
    lastName: "XYX",
    address1: "901",
    address2: "M6",
    city: "Palo",
    state: "CA",
    zip: "94303",
    country: "CHINA",
  });

  // 同步 initialFormData 的变化
  useEffect(() => {
    setFormData(initialFormData || {
      firstName: "ABC",
      lastName: "XYX",
      address1: "901",
      address2: "M6",
      city: "Palo",
      state: "CA",
      zip: "94303",
      country: "CHINA",
    });
  }, [initialFormData]);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value,
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    callBack(formData);
  };

  return (
    <div className="form-container">
      <form className="shipping-form" onSubmit={handleSubmit}>
        <h3>SHIPPING ADDRESS</h3>
        <div className="form-group">
          <button type="button" onClick={backOrder1}>Back</button>
        </div>
        <div className="form-group">
          <label>First name:</label>
          <input
            type="text"
            name="firstName"
            value={formData.firstName}
            onChange={handleInputChange}
          />
        </div>
        <div className="form-group">
          <label>Last name:</label>
          <input
            type="text"
            name="lastName"
            value={formData.lastName}
            onChange={handleInputChange}
          />
        </div>
        <div className="form-group">
          <label>Address 1:</label>
          <input
            type="text"
            name="address1"
            value={formData.address1}
            onChange={handleInputChange}
          />
        </div>
        <div className="form-group">
          <label>Address 2:</label>
          <input
            type="text"
            name="address2"
            value={formData.address2}
            onChange={handleInputChange}
          />
        </div>
        <div className="form-group">
          <label>City:</label>
          <input
            type="text"
            name="city"
            value={formData.city}
            onChange={handleInputChange}
          />
        </div>
        <div className="form-group">
          <label>State:</label>
          <input
            type="text"
            name="state"
            value={formData.state}
            onChange={handleInputChange}
          />
        </div>
        <div className="form-group">
          <label>Zip:</label>
          <input
            type="text"
            name="zip"
            value={formData.zip}
            onChange={handleInputChange}
          />
        </div>
        <div className="form-group">
          <label>Country:</label>
          <input
            type="text"
            name="country"
            value={formData.country}
            onChange={handleInputChange}
          />
        </div>
        <div className="form-group">
          <button type="submit">Confirm</button>
        </div>
      </form>
    </div>
  );
}